<template>
    <el-tabs type="card" :tab-position="tabPosition" :stretch="true" class="demo-tabs">
        <el-tab-pane label="数据" :lazy="true">
            <template #label>
              <div>
                <el-space>
                  <el-icon><coin/></el-icon>
                  <span>数据</span>
                </el-space>
              </div>
            </template>
            <Data :connect="props.connect"></Data>
        </el-tab-pane>
        <el-tab-pane label="集群" :lazy="true">
            <template #label>
              <div>
                <el-space>
                  <el-icon><cpu/></el-icon>
                  <span>集群</span>
                </el-space>
              </div>
            </template>
            <Cluster :connect="props.connect"/>
        </el-tab-pane>
        <el-tab-pane label="租约" :lazy="true">
            <template #label>
              <div>
                <el-space>
                  <el-icon><clock/></el-icon>
                  <span>租约</span>
                </el-space>
              </div>
            </template>
            <Lease :connect="props.connect"/>
        </el-tab-pane>
        <el-tab-pane label="用户" :lazy="true">
            <template #label>
              <div>
                <el-space>
                  <el-icon><user/></el-icon>
                  <span>用户</span>
                </el-space>
              </div>
            </template>
            <Users :connect="props.connect"/>
        </el-tab-pane>
        <el-tab-pane label="角色" :lazy="true">
            <template #label>
              <div>
                <el-space>
                  <el-icon><lock/></el-icon>
                  <span>权限</span>
                </el-space>
              </div>
            </template>
            <Roles :connect="props.connect"/>
        </el-tab-pane>
    </el-tabs>
</template>
<script setup>
import {onMounted, ref, h, defineProps} from "vue";
import Data from "@/components/etcd3/Data.vue";
import Cluster from "@/components/etcd3/Cluster.vue";
import Users from "@/components/etcd3/Users.vue";
import Roles from "@/components/etcd3/Roles.vue";
import Lease from "@/components/etcd3/Lease.vue";

const props = defineProps({
    connect: {
        type: Object,
        default: {
            name: '默认标题',
            url: 'http://127.0.0.1:2379',
            version: 'v2',
            username: 'root',
            password: '123456'
        }
    }
})

const tabPosition = ref("left")
</script>
<style>
.demo-tabs > .el-tabs__content {
    color: #6b778c;
}

.demo-tabs .custom-tabs-label .el-icon {
    vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
}
</style>